<h1 mat-dialog-title class="err-title">
  <ix-icon class="error-warning-icon" name="error"></ix-icon>
  {{ error.title | translate }}
</h1>

<div mat-dialog-content id="err-md-content" role="alertdialog">
  <div class="err-message-wrapper">
    <span [innerHTML]="error.message"></span>
  </div>

  <ng-container *ixIfNightly>
    @if (error.stackTrace) {
      <a
        ixTest="view-stack-trace"
        class="more-info"
        (click)="toggleStackTrace()"
      >
        @if (isStackTraceOpen()) {
          <ix-icon name="remove_circle_outline"></ix-icon>
        } @else {
          <ix-icon name="add_circle_outline"></ix-icon>
        }
        <span>{{ 'View Stack Trace' | translate }}</span>
      </a>

      <div
        class="stack-trace-panel"
        [class.open]="isStackTraceOpen()"
      >
        <div class="textarea scrolled-down" readonly matInput>
          {{ 'Error' | translate }}: {{ error.stackTrace }}
        </div>

        <ix-copy-button [text]="error.stackTrace"></ix-copy-button>
      </div>
    }
  </ng-container>
</div>

<div mat-dialog-actions>
  <button
    mat-button
    ixTest="close-error-dialog"
    (click)="dialogRef.close(true)"
  >
    {{ 'Close' | translate }}
  </button>

  @if (error.logs) {
    <button
      mat-button
      ixTest="download-logs"
      (click)="downloadLogs()"
    >
      {{ 'Download Logs' | translate }}
    </button>
  }
</div>
